<template>
    <div class="new_project">
        <div class="left-menu">
            <div class="user_info">
                <div><img class="h50" src="../../assets/image/user@2x.png" alt="" /></div>
                <div class="user_info_content">
                    <div class="user_info_name">用户名</div>
                    <div class="user_info_introduction">这个家伙很神秘，没有写简介</div>
                </div>
            </div>
            <div class="project-menu">
                <div
                    v-for="item in asideList"
                    :key="item.key"
                    @click="handleSelect(item.key)"
                    class="project-menu-box"
                    v-bind:class="{ active: showActiveKey === item.key }"
                >
                    <img class="h16" :src="item.icon" alt="" />
                    <span class="project-menu-name">{{ item.value }}</span>
                </div>
            </div>
            <div class="loginOut" @click="loginOut">
                <img src="../../assets/image/logout_default@2x.png" alt="" />
                <span>退出登录</span>
            </div>
        </div>
        <div class="right_content">
            <HomeRouteView />
        </div>
    </div>
</template>
<script lang="ts" setup>
import { deleteCookie } from '@/utils/utils';
import { useRouter } from 'vue-router';
import HomeRouteView from '@/components/HomeRouteView.vue';
import {
    init, asideList, handleSelect, showActiveKey,
} from './menuConfig';

init();

const router = useRouter();
function loginOut() {
    deleteCookie('SaaS_Token');
    router.push({ name: '/login' });
}
</script>
<style lang="scss" scoped>
.new_project {
    height: 100%;
    margin: 20px auto;
    width: 1360px;

    .left-menu {
        height: calc(100% - 40px);
        background-color: #ffffff;
        width: 268px;
        float: left;

        .user_info {
            padding: 40px 18px;
            display: flex;

            .h50 {
                height: 50px;
            }

            .user_info_content {
                width: 156px;
                margin-left: 10px;
                margin-top: 5px;

                .user_info_name {
                    line-height: 18px;
                    font-size: 16px;
                    color: var(--text-accent);
                }

                .user_info_introduction {
                    font-size: 12px;
                    color: var(----text-primary);
                    margin-top: 5px;
                }
            }
        }

        .project-menu {
            .active {
                background-color: var(--secondary-color);
            }

            .project-menu-box {
                cursor: pointer;
                height: 36px;
                line-height: 36px;
                padding-left: 44px;

                .h16 {
                    height: 16px;
                }

                .project-menu-name {
                    margin-left: 20px;
                    font-size: 14px;
                    color: var(----text-primary);
                }
            }
        }
    }

    .right_content {
        float: right;
        width: calc(100% - 288px);
        margin-left: 20px;
        height: calc(100% - 40px);
        overflow: auto;
    }
    .right_content::-webkit-scrollbar {
        width: 0 !important;
    }
}
.loginOut {
    position: absolute;
    bottom: 40px;
    padding-left: 44px;
    cursor: pointer;
}
.loginOut > img {
    height: 16px;
}
.loginOut > span {
    font-size: 14px;
    margin-left: 20px;
    color: var(--text-weaken);
}
.left-menu {
    position: relative;
}
</style>
